<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>广播参数设置</title>
    <link th:href="@{../../component/pear/css/pear.css}" rel="stylesheet">

    <script th:src="@{../../component/layui/layui.js}"></script>
    <script th:src="@{../../component/pear/pear.js}"></script>
</head>
<style>
    .layui-form-label {
        width: 200px !important;
        text-align: left !important;
    }

    .layui-form-item .layui-input-inline {
        width: 210px !important;
        margin-bottom: 0;
    }
</style>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">cmd信息</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-this">
                <form class="layui-form layui-form-pane" action="" id="sendform">
                    <div class="layui-form-item" >
                        <label class="layui-form-label">端口:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="port" name="port" lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label">连接状态(主)</label>
                        <input type="hidden" id="status_z" name="status_z"  autocomplete="off"
                               class="layui-input">
                        <div class="layui-input-inline">
                            <div id="status_z_red" style="width:25px;height:25px;border-radius:50%;background-color:red;display: block"></div>
                            <div id="status_z_green" style="width:25px;height:25px;border-radius:50%;background-color:green;display: none"></div>
                        </div>
                    </div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label">IP地址(主):</label>
                        <div class="layui-input-inline">
                            <input type="text" id="status_z_address" name="status_z_address" lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label">连接状态(备)</label>
                        <input type="hidden" id="status_b" name="status_b"  autocomplete="off"
                               class="layui-input">
                        <div class="layui-input-inline">
                            <div id="status_b_red" style="width:25px;height:25px;border-radius:50%;background-color:red;display: block"></div>
                            <div id="status_b_green" style="width:25px;height:25px;border-radius:50%;background-color:green;display: none"></div>
                        </div>
                    </div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label">IP地址(备):</label>
                        <div class="layui-input-inline">
                            <input type="text" id="status_b_address" name="status_b_address" lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: left; margin-left:15%">
                            <button class="layui-btn" lay-submit lay-filter="aformSubmit" >立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'button', 'popup', 'cookie','element'], function () {
        const form = layui.form,
            $ = layui.jquery,
            popup = layui.popup
        getInfo();
        setInterval(function () {
            getInfo();
        }, 5000);

        function getInfo() {
            $.ajax({
                url: '/getServerInfo',
                type: 'GET',
                data: {},
                success: function (data) {
                    if (data.code === 200) {
                        popup.success(data.msg);
                        formInput(data.data);
                    } else {
                        popup.failure(data.msg);
                    }
                },
                error: function () {
                    popup.failure("获取数据失败")
                }
            });
        }

        form.on('submit(aformSubmit)', function () {
            var d = {};
            var zd = {};
            var bd = {};
            zd["ip"]=$("#sendform input[name='status_z_address']").val();
            zd["port"]=$("#sendform input[name='port']").val();
            bd["ip"]=$("#sendform input[name='status_b_address']").val();
            bd["port"]=$("#sendform input[name='port']").val();
            d["primary_server"] = zd;
            d["backup_server"] = bd;
            $.ajax({
                url: '/setServerInfo',
                type: 'POST',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(d),
                success: function (data) {
                    if (data.code === 200) {
                        popup.success(data.msg);
                    } else {
                        popup.failure(data.msg);
                    }
                },
                error: function () {
                    popup.failure("提交失败!")
                }
            });
            return false;
        });

        function formInput(data) {
            const status_z_red = document.getElementById('status_z_red');
            const status_z_green = document.getElementById('status_z_green');
            const status_b_green = document.getElementById('status_b_green');
            const status_b_red = document.getElementById('status_b_red');
            try {
                $('#status_z_address').val(data.primary_server.ip);
                $('#status_b_address').val(data.backup_server.ip);
                $('#port').val(data.primary_server.port);
                if(data.primary_server.status=="1"){
                    status_z_red.style.display = 'none';// 未连接
                    status_z_green.style.display = 'block';// 已连接
                }else{
                    status_z_red.style.display = 'block';// 未连接
                    status_z_green.style.display = 'none';// 已连接
                }
                if(data.backup_server.status=="1"){
                    status_b_red.style.display = 'none';// 未连接
                    status_b_green.style.display = 'block';// 已连接
                }else{
                    status_b_red.style.display = 'block';// 未连接
                    status_b_green.style.display = 'none';// 已连接
                }
            } catch (e) {
                status_z_red.style.display = 'block';// 未连接
                status_z_green.style.display = 'none';// 已连接
                status_b_red.style.display = 'block';// 未连接
                status_b_green.style.display = 'none';// 已连接
                popup.failure("获取数据失败")
                return;
            }
            form.render();
        }
    })
</script>
</body>
</html>
